<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>首页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <style>

        .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a {
            background-color: #c5b96b;
        }
        .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a.collapsed:hover, .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a.collapsed:focus{
            background-color: #c5b96b;
        }
        .c-content-accordion-1.c-theme .panel > .panel-collapse > .panel-body {
            background-color: #c5b96b;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/static/gse/public/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/static/gse/css/components.css"/>
    <link rel="stylesheet" type="text/css" href="/static/gse/css/cubeportfolio.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/gse/css/plugins.css"/>
    <link rel="stylesheet" type="text/css" href="/static/gse/css/fullcalendar.min.css"/>
</head>
<style>
    .carousel-inner img {
        width: 100%;
    }

    header {
        background: #2f353b;
        border-bottom: 0;
    }

    .c-btn-border-1x.c-btn-white.c-btn-border-opacity-04 {
        border-color: rgba(255, 255, 255, 0.4);
        color: #FFFFFF;
        background: none;
        font-size: 14px;
        padding: 6px 18px 4px 18px;
    }

    .c-theme-font,
    .c-theme-color {
        color: #c5b96b !important;
    }

    .c-left,
    .c-font-left {
        text-align: left;
    }

    .cbp .cbp-item {
        position: unset;
        margin-right: 1%;
    }

    header {
        position: fixed;
        top: 0;
        z-index: 999;
        width: 100%;
    }
    html{
        width: 100%;
        overflow: hidden;
    }
    .carousel {
        margin-top: 65px;
    }

    .btn + .btn {
        margin: 0;
        margin: 5px;
    }

    .c-btn-sbold {
        margin: 5px;
    }

    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        height: 50vw;
    }

    .c-layout-go2top {
        color: #fff;
        background: #0000005e;
        height: 3rem;
        width: 3rem;
        text-align: center;
        line-height: 3rem;
        border-radius: 50%;
    }
    .panel-body img{
        max-width: 100%;
    }
    .video_box{
        background: #000;
        height: 100vh;
        width: 100vw;
    }
    .close{
        position: absolute;
        top: 10rem;
        color: #fff;
        font-size: 15px;
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
        right: 5%;
        z-index: 999;

    }
    video{
        z-index: 0;
        pointer-events: none;
    }
    .top_box{
        display: none!important;
    }
</style>
<body>
<header class="c-layout-header c-layout-header-3 c-layout-header-dark-mobile  c-layout-header-onepage">
    <div class="c-navbar">
        <div class="container">
            <div class="c-navbar-wrapper clearfix">
                <div class="c-brand c-pull-left">
                    <a href="#"><img src="/static/gse/img/logo.png" height="22"></a>
                    <button class="c-hor-nav-toggler top_box" type="button" data-target=".c-mega-menu">
                        <span class="c-line"></span>
                        <span class="c-line"></span>
                        <span class="c-line"></span>
                    </button>
                </div>
                <nav class="c-mega-menu c-mega-menu-onepage c-pull-right c-mega-menu-dark c-mega-menu-dark-mobile c-fonts-uppercase c-fonts-bold top_box">
                    <ul class="nav navbar-nav c-theme-nav">
                        <li>
                            <a href="{:url('User/Panel')}"
                               class="c-btn-border-opacity-04 c-btn btn-no-focus c-btn-header btn btn-sm c-btn-border-1x c-btn-white c-btn-square c-btn-uppercase">會員專區</a>
                        </li>
                        <li class="c-quick-sidebar-toggler-wrapper c-quick-sidebar-toggler">
                            <a href="#"
                               class="c-btn-border-opacity-04 c-btn btn-no-focus c-btn-header btn btn-sm c-btn-border-1x c-btn-white c-btn-square c-btn-uppercase">市場</a>
                        </li>
                        <nav class="c-layout-quick-sidebar">
                            <div class="c-header">
                                <button type="button" class="c-link c-close">
                                    <i class="icon-close">X</i>
                                </button>
                            </div>
                            <div class="c-content c-left">
                                <div class="c-section">
                                    <h3>市场</h3>
                                    <a class="btn btn-sm c-btn-square c-btn-border-1x c-btn-white c-btn-sbold c-btn-uppercase">
                                        <span>台湾&nbsp;<img
                                                src="https://amoeba.11may.app/11may/assets/global/img/flags/tw.png"></span>
                                    </a></div>
                                <div class="c-section">
                                    <h3>语系</h3>
                                    <a href="javascript:"
                                       class="btn btn-sm c-btn-square c-btn-border-1x c-btn-white c-btn-sbold c-btn-uppercase">English</a>
                                    <a href="https://amoeba.11may.app/signin/lang/zh-CN"
                                       class="btn btn-sm c-btn-square c-btn-border-1x c-btn-white c-btn-sbold c-btn-uppercase">简体中文</a>
                                    <a href="https://amoeba.11may.app/signin/lang/zh-TW"
                                       class="btn btn-sm c-btn-square c-btn-border-1x c-btn-white c-btn-sbold c-btn-uppercase">繁體中文</a>
                                </div>
                            </div>
                        </nav>
                    </ul>
                </nav>
            </div>
        </div>

    </div>
</header>
<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->

    <!-- 轮播（Carousel）项目 -->

    <!-- 轮播（Carousel）导航 -->

</div>
<section>
    <div style="position: relative;" class="video_box">
        <video id="video" controlslist="nodownload"  style="width: 100vw;height: 50vh;margin-top:20vh;background: transparent" autoplay>
            <source src="{$config.video}">
        </video>
        <p style="position: absolute" class="close">跳过</p>
    </div>
</section>
<section id="profile" style="display: none">
    <div class="c-content-box c-size-md c-bg-grey-1">
        <div class="container">
            {$config.about}
        </div>
    </div>
</section>
</body>
<script src="__STATIC__/Admin/js/jquery-2.1.1.min.js"></script>
<script src="/static/gse/js/jquery.cubeportfolio.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/static/gse/public/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/gse/js/official.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".c-link").click(function (event) {
            event.preventDefault();
            $('html,body').animate({scrollTop: $(this.hash).offset().top}, 500);
        });
    });
    $(".close").click(function () {
        $(".video_box").remove()
        $("#profile").show()
        $(".top_box").removeClass('top_box')
    })
    $('.c-hor-nav-toggler').click(function () {
        $('.c-mega-menu').toggle()

    })
    $('.c-quick-sidebar-toggler-wrapper').click(function () {
        $('.c-layout-quick-sidebar').toggle()
    })

    $('.c-close,.c-link').click(function () {
        $('.c-layout-quick-sidebar').hide()
    })
    var width = $(document).width()
    if (width < 992) {
        $(".c-link").click(function () {
            $('.c-mega-menu').toggle()
        })
    } else {
        $('.c-mega-menu').show()
    }
    window.onresize = function () {
        width = $(document).width()
        if (width < 992) {
            $(".c-link").click(function () {

                $('.c-mega-menu').hide()
            })
        } else {
            $('.c-mega-menu').show()
        }
    }
    $(function () {
        var v = document.getElementById('video')
        // v.play()
        v.addEventListener('play',function () {
            var i = window.setInterval(function () {
                if (v.ended){
                    clearInterval(i)
                    console.log('播放结束')
                    $(".video_box").remove()
                    $("#profile").show()
                    $(".top_box").removeClass('top_box')
                }
            },20)
        })
        v.addEventListener('timeupdate',function () {
            var timeDisplay;
            timeDisplay = v.currentTime
            console.log(timeDisplay)
        })
    })
</script>

</html>
